
import { Info } from 'vant';
<template>
  <div class="page-index">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px;
      "
    >
      <div style="display: flex; align-items: center" @click="toBack()">
        <img src="../../assets/fitness/icon_back.png" alt="" style="" />
      </div>
      <div
        style="
          text-align: center;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        "
      >
        我的预约
      </div>
      <div></div>
    </div>
    <div class="List" style="margin-top: 15px">
      <van-tabs v-model="active" @change="changActive()">
        <van-tab title="全部"></van-tab>
        <van-tab title="未支付"></van-tab>
        <van-tab title="已支付"></van-tab>
        <van-tab title="已取消"></van-tab>
      </van-tabs>
      <div style="margin-top: 15px">
        <van-search
          @search="onSearch"
          v-model="value"
          shape="round"
          placeholder="请输入搜索标题"
        />
      </div>
      <div style="margin: 0 20px">
        <div
          class="card-container"
          style="margin-top: 15px"
          v-for="(item, index) in List"
          :key="index"
        >
          <div
            class="card-type"
            :style="{ color: getStatusColor(item.PAY_STATUS) }"
          >
            {{
              item.PAY_STATUS == "1"
                ? "未支付"
                : item.PAY_STATUS == "2"
                ? "已支付"
                : "已取消"
            }}
          </div>
          <div
            class="card-info"
            style="
              font-family: Source Han Sans, Source Han Sans;
              font-weight: 700;
              font-size: 16px;
              color: #333333;
            "
          >
            <img
              style="vertical-align: middle"
              src="../../assets/fitness/icon_changdi.png"
              alt=""
            />
            预约场地：{{ item.VENUESID }}
          </div>
          <div
            class="card-time"
            style="
              font-family: Source Han Sans, Source Han Sans;
              font-weight: 400;
              font-size: 12px;
              color: #666666;
              margin-top: 8px;
            "
          >
            <img
              style="vertical-align: middle"
              src="../../assets/fitness/icon_time.png"
              alt=""
            />
            预约开始时间：{{ item.ORDER_START_TIME }}
          </div>
          <div
            class="card-time"
            style="
              font-family: Source Han Sans, Source Han Sans;
              font-weight: 400;
              font-size: 12px;
              color: #666666;
              margin-top: 8px;
            "
          >
            <img
              style="vertical-align: middle"
              src="../../assets/fitness/icon_time.png"
              alt=""
            />
            预约结束时间：{{ item.ORDER_END_TIME }}
          </div>
          <div
            class="card-time"
            style="
              font-family: Source Han Sans, Source Han Sans;
              font-weight: 400;
              font-size: 12px;
              color: #666666;
              margin-top: 8px;
            "
          >
            <img src="../../assets/fitness/icon_together.png" alt="" />同行亲友:
            <span v-for="(Info, indexs) in item.ESCORTS" :key="indexs">
              {{ Info.ESCORT_NAME }}
            </span>
          </div>
          <div class="card-container_bottom" v-if="item.PAY_STATUS == '1'">
            <div
              class="getPeople"
              @click="addPeople(item)"
              v-if="item.isWorkday == '0' && item.ESCORT_SHOWORHIDE == '1'"
            >
              添加亲友
            </div>
            <div
              v-if="item.PAY_SHOWORHIDE == '1'"
              class="topay"
              @click="toPay(item)"
            >
              去支付
            </div>
            <div
              v-if="item.CANCEL_SHOWORHIDE == '1'"
              class="del"
              @click="del(item)"
            >
              取消预约
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import QRCode from "qrcode";
import { getCarous } from "../../api/index";

export default {
  data() {
    return {
      value: "",
      active: 0,
      List: [],
      payStatus: "",
    };
  },
  components: {},
  filters: {},
  computed: {},
  mounted() {},
  created() {
    this.initList();
  },
  methods: {
    getStatusColor(status) {
      switch (status) {
        case "1":
          return "#FB8524"; // 未支付
        case "2":
          return "#4582FF"; // 已支付
        default:
          return "#999999"; // 已取消
      }
    },
    addPeople(item) {
      this.$router.push({ path: `/people/${item.APPLY_NO}` });
    },
    toPay(item) {
      // this.$router.push({ path: '/money' });
      this.$router.push({ path: '/money', query: { item: JSON.stringify(item) } });
    },
    del(item) {
      this.$dialog
        .confirm({
          title: "确认取消吗",
        })
        .then(() => {
          var param = {
            cmd: "com.awspaas.user.apps.sfeg.tu.honor.cancel_my_order_venues",

            dduserid: window.dduserid,
            applyNo: item.APPLY_NO,
          };

          getCarous(param).then((res) => {
            const { result, msg, data, id } = res;

            if (result === "ok") {
              this.$toast.success({
                message: data.msg,
              });
              this.initList();
            } else {
              // this.finished = true;
            }
          });
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    onSearch() {
      this.initList();
    },
    changActive() {
      this.value = "";
      if (this.active == 0) {
        this.payStatus = "";
      } else {
        this.payStatus = this.active;
      }
      this.initList();
    },
    toBack() {
      this.$router.push({
        name: "index",
      });
    },
    initList() {
      var param = {
        cmd: "com.awspaas.user.apps.sfeg.tu.honor.get_my_pay_order_venues",

        dduserid: window.dduserid,
        payStatus: this.payStatus,
        selectedContent: this.value,
      };

      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result === "ok") {
          this.List = data.resultData;
        } else {
          // this.finished = true;
        }
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.back {
  text-align: center;
  span {
    background: #ffffff;
    color: #0d63e9;
    font-size: 17px;
    padding: 6px 30px;
    border-radius: 10px;
  }
}
.van-tabs {
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #eeeeee;
}
/* 卡片容器样式 */
.card-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 16px;
  background: #ffffff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 4px 4px;
  position: relative;
}
.card-type {
  position: absolute;
  right: 17px;
  top: 16px;
  font-size: 16px;
  color: #baa7a7;
}

/* 预约类型样式 */
.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8px;
}

/* 预约场地样式 */
.card-info {
  font-size: 17px;
  color: #666666;

  margin-bottom: 4px;
  font-weight: 700;
}

/* 预约时间样式 */
.card-time {
  font-size: 14px;
  color: #999999;
}
.card-container_bottom {
  display: flex;
  justify-content: end;
  /* justify-content: space-around; */
  margin-top: 5px;
  .getPeople {
    font-size: 14px;
    background: #62c980;
    color: #ffffff;
    padding: 6px 35px;
    border-radius: 5px;
  }
  .topay {
    font-size: 14px;
    background: #0256ff;
    color: #ffffff;
    padding: 6px 35px;
    border-radius: 5px;
    margin: 0 4px;
  }
  .del {
    font-size: 14px;
    background: #eeeeee;
    color: #666666;
    padding: 6px 35px;
    border-radius: 5px;
  }
}
</style>
  
  